// 引入HOOK
import React, { useState, useEffect } from 'react'
import Test from './Test'
export default function App() {
  //   console.log('app重新解析了')
  // count 是我们定义出来的常量,用来接收定义出来的状态数据
  // setCount 和Count是一对,专门用来修改count的数据
  // 注意: useState执行一次,只会创建一个状态数据
  const [count, setCount] = useState(0)
  const [msg, setMsg] = useState('hello HOOK')

  // 外边这个函数.模拟的是挂载和更新
  useEffect(() => {
    // 里面这个就是模拟的卸载
    console.log('app挂载或更新了')

    //订阅
    return () => {
      console.log('app卸载了')
      //清除订阅
    }
  }, [])
  return (
    <div>
      App, {count}, {msg}
      <br />
      <button
        onClick={() => {
          setCount(count + 1)
          // 1. setXXX是异步到的
          // 2. setXXX执行,会导致整个函数组件体的代码重新执行
          // 3. 更新之后,函数体重新执行.react会发现某个状态数据已经初始化过了,不会重复初始化,会自动管理我们的数据. 但是结构的常量名每一次是重新创建的
          // 4. useState已经自动判断了state是否变化,减少更新次数
          //   console.log(count)
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          setMsg('hook太tn好了')
        }}
      >
        修改msg
      </button>
      {!count && <Test></Test>}
    </div>
  )
}
